<template>
  <div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
      <h1 class="text-2xl font-bold mb-6">用户信息测试页面</h1>
      
      <!-- 用户Store信息 -->
      <div class="bg-white border border-gray-200 rounded-lg p-4 mb-4">
        <h2 class="text-lg font-semibold mb-3">用户Store信息</h2>
        <pre class="bg-gray-100 p-3 rounded text-sm">{{ JSON.stringify(userStore.userInfo, null, 2) }}</pre>
      </div>

      <!-- 前台API用户信息 -->
      <div class="bg-white border border-gray-200 rounded-lg p-4 mb-4">
        <h2 class="text-lg font-semibold mb-3">前台API用户信息</h2>
        <button @click="testFrontendAPI" class="bg-blue-500 text-white px-4 py-2 rounded mb-3">
          测试前台API
        </button>
        <pre class="bg-gray-100 p-3 rounded text-sm">{{ JSON.stringify(frontendUserInfo, null, 2) }}</pre>
      </div>

      <!-- 后台API用户信息 -->
      <div class="bg-white border border-gray-200 rounded-lg p-4 mb-4">
        <h2 class="text-lg font-semibold mb-3">后台API用户信息</h2>
        <button @click="testBackendAPI" class="bg-green-500 text-white px-4 py-2 rounded mb-3">
          测试后台API
        </button>
        <pre class="bg-gray-100 p-3 rounded text-sm">{{ JSON.stringify(backendUserInfo, null, 2) }}</pre>
      </div>

      <!-- Token信息 -->
      <div class="bg-white border border-gray-200 rounded-lg p-4 mb-4">
        <h2 class="text-lg font-semibold mb-3">Token信息</h2>
        <pre class="bg-gray-100 p-3 rounded text-sm">{{ tokenInfo }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { getCurrentUserProfile } from '@/api/frontend/user'
import { getUserInfo } from '@/api/admin/user'
import { getToken } from '@/composables/cookie'

const userStore = useUserStore()
const frontendUserInfo = ref(null)
const backendUserInfo = ref(null)
const tokenInfo = ref('')

// 测试前台API
function testFrontendAPI() {
  getCurrentUserProfile().then((res) => {
    frontendUserInfo.value = res
  }).catch((error) => {
    frontendUserInfo.value = { error: error.message }
  })
}

// 测试后台API
function testBackendAPI() {
  getUserInfo().then((res) => {
    backendUserInfo.value = res
  }).catch((error) => {
    backendUserInfo.value = { error: error.message }
  })
}

// 获取Token信息
function getTokenInfo() {
  const token = getToken()
  tokenInfo.value = token ? `Token存在: ${token.substring(0, 20)}...` : 'Token不存在'
}

onMounted(() => {
  getTokenInfo()
  testFrontendAPI()
  testBackendAPI()
})
</script>
